<template>
  <!-- 使用 ElementPlus 提供的 el-container 组件定义容器 -->
  <el-container>
      <el-header class="header">
          <!-- 水平导航条 -->
          <el-menu mode="horizontal" 
                   :ellipsis="ellipsis" 
                   default-active="single-file-component">
              <el-menu-item index="home">
                  主页
              </el-menu-item>
              <el-menu-item index="basics" @click="handler">
                  基础
              </el-menu-item>
              <!-- 子菜单 -->
              <el-sub-menu index="component-basics">
                <!-- 通过 title 插槽分发内容用于确定子菜单的标题 -->
                <template #title>
                    组件基础
                </template>
                <!-- 其它内容都分发给 `—` 插槽 -->
                <el-menu-item index="component-register">
                    组件注册
                </el-menu-item>
                <el-menu-item index="component-options">
                    组件选项
                </el-menu-item>
                <el-menu-item index="component-props">
                    props
                </el-menu-item>
                <el-menu-item index="component-communication">
                    组件通信
                </el-menu-item>
                <el-sub-menu index="component-slots">
                    <!-- 通过插槽分发标题 -->
                    <template #title>插槽</template>
                    <el-menu-item index="understand-slot">
                        理解插槽
                    </el-menu-item>
                     <el-menu-item index="use-slot">
                        使用插槽
                    </el-menu-item>
                     <el-menu-item index="scoped-slot">
                        作用域插槽
                    </el-menu-item>
                </el-sub-menu>
                
                <el-menu-item index="component-lifecycle">
                    生命周期
                </el-menu-item>
                <el-menu-item index="component-advanced">
                    高级用法
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item index="single-file-component">
                  单文件组件
              </el-menu-item>
          </el-menu>
      </el-header>
      <el-container>
        <el-aside class="aside">
            <el-menu mode="vertical" default-active="component-basics">
              <el-menu-item index="home">
                  主页
              </el-menu-item>
              <el-menu-item index="basics">
                  基础
              </el-menu-item>
              <el-menu-item index="component-basics">
                  组件基础
              </el-menu-item>
              <el-menu-item index="single-file-component">
                  单文件组件
              </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main class="main">
            <!-- 使用自定义组件实现购物车效果 -->
            <cart-view></cart-view>
        </el-main>
      </el-container>
      <el-footer class="footer">FOOTER</el-footer>
  </el-container>
</template>

<script>
import CartView from '@/components/CartView.vue';

export default {
    name: 'HomeView',
    data(){
        return {
            ellipsis: false
        }
    },
    methods: {
        handler(comp){
            console.log( comp );
        }
    },
    components: {
        'cart-view': CartView
    }
}
</script>

<style>
body {
    margin: 0;
    padding: 0;
}
.header{
    background: gold;
    min-height: 60px;
    height: 10vh;
}
.aside {
    background: #dfdfdf;
    height: 80vh;
    width: 20vw;
}
.main {
    padding: 0;
    background: #ccccff;
}
.footer {
    background: gold;
    min-height: 60px;
    height: 10vh;
}
</style>